import React, { useEffect, useState } from "react";
import classnames from "classnames";
import { useHistory } from "react-router-dom";
import Icon from "../Icon";
import { SwitchPropsType } from "./PropsType";
import "./index.less";
import { log } from "console";
export default function NavBar(props: SwitchPropsType) {
  const {
    className,
    style = {},
    checked,
    disabled=false,
    onChange,
    onClick,
    platform = "ios",
    color = "#e1251b",
  } = props;
  const cls = classnames("m-react-switch", className,platform);
  const [value, setValue] = useState(checked);

  const onClickTypeAction = () => {
    setValue(!value);
  };
  useEffect(() => {
    onClick(value);
  }, [value]);

  return (
    <div className={cls} style={{ ...style }} onClick={disabled?null:onClickTypeAction}>
      <div
        className={`input-${platform} ${value ? "active" : "normal"}`}
        style={{ backgroundColor: `${value ? color : ""}` }}
      ></div>
      <div className={`circle-${platform} ${value ? "right" : "left"}`}></div>
    </div>
  );
}
